<template>
  <el-dialog ref="dialogRef" class="c-dialog-fixed" v-model="dialogVisible" width="500px" @closed="handleClosed"
    @close="handleClose" :title="dialogTitle" v-loading="loading" :before-close="handleBeforeClose">
    <el-form ref="formRef" :model="formData" label-width="auto" :rules="formRules" @keyup.enter="save">
      <el-divider>用户信息</el-divider>
      <el-form-item label="登录名" prop="loginName">
        <el-input v-model="formData.loginName" placeholder="填写用户登录名"></el-input>
      </el-form-item>
      <el-form-item label="修改密码" prop="changePassword" v-if="formData.id != 0">
        <el-switch v-model="formData.changePassword" />
      </el-form-item>
      <el-form-item label="登录密码" prop="loginPassword" v-if="!formData.id != 0 || formData.changePassword">
        <el-input v-model="formData.loginPassword" type="password" placeholder="用户登录密码"></el-input>
      </el-form-item>
      <el-form-item label="所属角色" prop="roleId">
        <role-select v-model="formData.roleId" />
      </el-form-item>
      <el-form-item label="禁用" prop="isDisabled">
        <el-switch v-model="formData.isDisabled"></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="save" :loading="loading">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import roleSelect from "@/components/sys/role/common/select.vue"
import api from "@/api/sys/user";
import { cloneObjectValue, cloneDeepObject } from "@/utils/common";
import { ref, useTemplateRef } from "vue";
import { ElFormItem, ElMessage } from "element-plus";
defineProps({
  inDialog: {
    type: Boolean,
    default: false
  }
})
const openCreate = () => {
  dialogTitle.value = "创建用户"
  dialogVisible.value = true
}

const emit = defineEmits(["close-saved"])
const dialogRef = useTemplateRef("dialogRef")
const formRef = useTemplateRef("formRef")
const formData = ref({
  id: 0,
  loginName: "",
  loginPassword: "",
  changePassword: false,
  roleId: null,
  isDisabled: false,
})

const loading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref("")
const saved = ref(false)

const formRules = ref({
  name: [{ required: true, message: "请填写用户名称" }],
  loginName: [{ required: true, message: "请填写登录名" }],
  loginPassword: [{ required: true, message: "请填写登录密码" }],
  roleId: [{ required: true, message: "请选择所属角色" }],
})



const openEdit = (inputData) => {
  dialogTitle.value = "编辑用户"
  dialogVisible.value = true
  cloneObjectValue(formData.value, inputData)
}
const save = async () => {
  loading.value = true
  try {
    await formRef.value.validate();
  }
  catch {
    loading.value = false;
    return;
  }
  let res = await api.save(formData.value);
  if (res.code != 0) {
    loading.value = false;
    return;
  }
  ElMessage.success("保存成功");
  formData.id = res.data;
  saved.value = true;
  loading.value = false;
}
const handleClosed = () => {
  dialogTitle.value = "";
  saved.value = false;
  formRef.value.resetFields();
  // cloneObjectValue(data.value, initData)
}
const handleClose = () => {
  if (saved.value) {
    emit("close-saved");
  }
}
const handleBeforeClose = (done) => {
  if (loading.value) {
    ElMessage.warning("加载中，请稍候")
    return;
  }
  done()
}
defineExpose({
  openCreate,
  openEdit
})
</script>